/*
 * @Description: 购票页面选择乘车人数与进入订单页的组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:36:04
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:54:33
 */

<template>
  <div class="population_main fontsize32">
    <div class="population_info">
      <span class="title">乘车人数</span>
      <i
        class="iconfont icon-reduce"
        @click="reducePopulation"
      ></i>
      <span class="population">{{population}}</span>
      <i
        class="iconfont icon-add"
        @click="addPopulation"
      ></i>
      <button
        class="fontsize32"
        @click="skipToCreateOrder"
      >下一步</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      population: 1 // 乘车人数
    }
  },
  methods: {
    addPopulation () { // 添加乘车人数，上限999
      this.population++
      if (this.population > 999) {
        this.population = 999
        this.$emit('toast', '不能再多啦')
      }
    },
    reducePopulation () { // 减少乘车人数，下限1
      this.population--
      if (this.population < 1) {
        this.population = 1
        this.$emit('toast', '不能再少啦')
      }
    },
    skipToCreateOrder () { // 点击下一步，进入订单确认
      this.$router.push({ path: 'createOrder' })
    }
  }
}
</script>

<style lang="scss" scoped>
.population_main {
  height: 112px;
  .population_info {
    width: 100%;
    height: 112px;
    line-height: 112px;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    box-shadow: 0 0 5px #ccc; /*no*/
    i {
      width: 48px;
      height: 48px;
      line-height: 48px;
      display: inline-block;
      text-align: center;
      color: #fff;
      background-color: #027aff;
      border-radius: 50%;
    }
    .title {
      padding: 0 32px;
      color: #999;
    }
    .population {
      width: 84px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      display: inline-block;
      border: 1px solid #ccc;
      margin: 0 16px;
    }
    button {
      width: 248px;
      height: 112px;
      border: 0;
      color: #fff;
      background-color: #027aff;
      float: right;
    }
  }
}
</style>
